<template>
<div>
    <detail-banner
    :sightName= 'sightName'
    :bannerImg= 'bannerImg'
    ></detail-banner>
    <detail-list :firstTitle= 'firstTitle'></detail-list>
    <detail-header :sightName= 'sightName'></detail-header>
</div>
</template>
<script>
import axios from 'axios'
import DetailBanner from './components/detail-banner'
import DetailHeader from './components/detail-header'
import DetailList from './components/detail-list'
export default {
    name: 'Detail',
    components: {
        DetailBanner,
        DetailHeader,
        DetailList
    },
    data() {
        return {
            bannerImg: '',
            sightName: '',
            firstTitle: []
        }
    },
    methods: {
        getDetailInfo() {
            //根据home-recommend中的router-link绑定的id，设置了Detail组件的动态路由。
            //根据Detail组件的动态路由中的动态变量id，来分别访问不同的json文件
            //commom组件会发一次ajax请求。。
            axios.get('/api/detail.json', {
                params: {
                    id: this.$route.params.id
                }
            })
                .then(this.getDetailInfoSucc)
        },
        getDetailInfoSucc(res) {
            res = res.data
            if (res.ret && res.data) {
                    this.bannerImg = res.data.bannerImg
                    this.sightName = res.data.sightName
                    this.firstTitle = res.data.categoryList
            }
        }
    },
    mounted() {
        this.getDetailInfo()
    }
}
</script>
<style lang="stylus" scoped>
*
    box-sizing border-box
    padding 0
    margin 0
    .detail
        position absolute
        top 0
        bottom 0
        left 0
        right 0
        overflow hidden
</style>
